<template>
    <div class="knowledgeExtension">
        <div class="knowledgeExtensionButton" @click.stop.prevent="openKnowledgeExtensionModule">
            <el-button type="danger">知识延伸</el-button>
        </div>

        <el-dialog :title="moduleDialogTitle" :visible.sync="moduleVisible" width="60%" :close-on-click-modal="false">
            <el-form ref="knowledgeExtensionFrom" :model="knowledgeExtensionFrom" :rules="knowledgeExtensionRules" label-width="25%">
                <div class="moduleLine">
                    <el-form-item label="标题" prop="knowledgeExtensionTitle">
                        <el-input type="text" v-model="knowledgeExtensionFrom.knowledgeExtensionTitle"></el-input>
                    </el-form-item>
                </div>
                <div class="moduleLine">
                    <el-form-item label="描述" prop="knowledgeExtensionDescribe">
                        <el-input type="textarea" v-model="knowledgeExtensionFrom.knowledgeExtensionDescribe"></el-input>
                    </el-form-item>
                </div>
                <div class="moduleLine">
                    <el-row>
                        <el-button plain @click.stop.prevent="optionGameScreeningType(0)">预备章</el-button>
                        <el-button type="primary" plain @click.stop.prevent="optionGameScreeningType(1)">主线</el-button>
                        <el-button type="success" plain @click.stop.prevent="optionGameScreeningType(2)">左手</el-button>
                        <el-button type="info" plain @click.stop.prevent="optionGameScreeningType(3)">乐理</el-button>
                        <el-button type="warning" plain @click.stop.prevent="optionGameScreeningType(4)">右手</el-button>
                        <el-button type="danger" plain @click.stop.prevent="optionGameScreeningType(5)">预备库</el-button>
                        <!-- <el-button type="danger" plain></el-button> -->
                    </el-row>
                    <div style="margin: 15px 0;"></div>
                    <el-row v-if="JSON.stringify(gameLevelList) !== '[]'">
                        <div class="chapterList" v-for="(item, index) in gameLevelList[gameLevelType]" :key="index">
                            <div class="chapterTitle" @click.stop.prevent="collapseLevelChange(item)">{{item.chapterTitle}}</div>
                            <div class="noteList" v-for="(itemNote, indexNote) in item.noteList" :key="indexNote" v-show="item.showed">
                                <div class="noteTitle" v-if="gameLevelType === 0 || gameLevelType === 1 || gameLevelType === 3 || gameLevelType === 5" @click.stop.prevent="collapseLevelChange(itemNote)">{{itemNote.noteTitle}}</div>
                                <div class="" v-if="gameLevelType === 2 || gameLevelType === 4" @change="handleCheckedLevelChange(itemNote)" >
                                    <el-checkbox :label="itemNote" :checked="itemNote.checked" :disabled="itemNote.disabled">
                                        {{itemNote.noteTitle}}
                                    </el-checkbox>
                                </div>
                                <div style="margin: 15px 0;"></div>
                                <div class="stripList" 
                                    v-for="itemStrip in itemNote.noteStripList" 
                                    :key="itemStrip.stripId" 
                                    @change="handleCheckedLevelChange(itemStrip)" 
                                    v-show="itemNote.showed"
                                    v-if="gameLevelType !== 2 && gameLevelType !== 4"
                                >
                                    <el-checkbox :label="itemStrip" :checked="itemStrip.checked" :disabled="itemStrip.disabled">
                                        {{itemStrip.title}}
                                        <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 0" style="color: #ee3a29">（视频）</span> 
                                        <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 3" style="color: #ee3a29">（教学视频）</span> 
                                        <span v-if="itemStrip.follow === '1'" style="color: #ee3a29">（跟弹）</span> 
                                        <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 1" style="color: #ee3a29">（乐曲）</span> 
                                        <span v-if="itemStrip.follow !== '1' && itemStrip.stripType === 2" style="color: #ee3a29">（问答）</span> 
                                    </el-checkbox>
                                </div>
                            </div>
                        </div>
                    </el-row>
                </div>
            </el-form>
        </el-dialog>



    </div>
</template>

<script type="text/ecmascript-6">
    import Vue from 'vue'
    import { obtainGameScreeningList } from '@/config/api'
    export default {
        data() {
            return {
                // 模块弹窗标题
                moduleDialogTitle:'',
                // 显示模块弹窗
                moduleVisible: false,
                // 储存 选中的关卡
                checkedLevel: [],
                // 游戏关卡数据 列表
                gameLevelList: [],
                // 游戏关卡类型  0 -- 预备章  1 -- 主线  2 -- 左手  3 -- 乐理  4 -- 右手  5 -- 预备库
                gameLevelType: 0,



                // 知识延伸表单
                knowledgeExtensionFrom: {
                    knowledgeExtensionTitle: '',
                    knowledgeExtensionDescribe: ''
                },
                knowledgeExtensionRules: {
                    knowledgeExtensionTitle: [
                        { required: true, message: '请输入知识延伸标题', trigger: 'blur' },
                    ],
                    knowledgeExtensionDescribe: [
                        { required: true, message: '请输入知识延伸描述', trigger: 'blur' },
                    ]
                },
            }
        },
        methods: {
            // 打开知识延伸模块
            openKnowledgeExtensionModule() {
                let self = this;
                console.log('打开知识延伸模块')
                // 模块弹窗标题
                self.moduleDialogTitle = '知识延伸'
                // 显示模块弹窗
                self.moduleVisible = true
                // 储存 选中的关卡
                self.checkedLevel = []
                // 游戏关卡数据 列表
                self.gameLevelList = []
                // 获取游戏关卡列表数据
                self.obtainGameScreeningData()
            },
            // 选择游戏关卡类型
            optionGameScreeningType(status) {
                let self = this;
                // 游戏关卡类型  0 -- 预备章  1 -- 主线  2 -- 左手  3 -- 乐理  4 -- 右手  5 -- 预备库
                self.gameLevelType = status
                // console.log(self.gameLevelList[self.gameLevelType], '选择游戏关卡类型')
                console.log(self.gameLevelType, '选择游戏关卡类型')
            },
            // 获取游戏关卡列表数据
            async obtainGameScreeningData(){
                let self = this;
                // const loading = self.$loading({
                //     lock: true,
                //     text: 'Loading',
                //     spinner: 'el-icon-loading',
                //     background: 'rgba(0, 0, 0, 0.7)'
                // });
                const gameLevelData = await obtainGameScreeningList(self.gameLevelType);
                if(JSON.stringify(gameLevelData) != '{}' && gameLevelData){
                    // 游戏关卡数据 列表
                    self.gameLevelList = []
                    if (gameLevelData.status === 200){
                        // 游戏关卡数据 列表
                        self.gameLevelList =  gameLevelData.data;
                        // 初始化游戏关卡列表数据
                        self.initGameScreeningData()
                        // if (JSON.stringify(self.gameLevelList) !== '[]') {
                        //     console.log(self.checkedLevel, '获取游戏关卡列表数据 checkedLevel')
                        // }
                    }

                }
                console.log(self.gameLevelList, '....获取游戏关卡列表数据')
                // loading.close()
            },
            // 折叠关卡的变化
            collapseLevelChange(item) {
                let self = this;
                Vue.set(item, 'showed', !item.showed)
            },
            // 初始化游戏关卡列表数据
            initGameScreeningData(){
                let self = this;
                if (JSON.stringify(self.gameLevelList) !== '[]') {
                    // 游戏关卡数据 列表
                    self.gameLevelList.some((itemGame, indexGame) => {
                        itemGame.some((itemChapter, indexChapter) => {
                            Vue.set(itemChapter, 'showed', false)
                            itemChapter.noteList.some((itemNote, indexNote) => {
                                Vue.set(itemNote, 'showed', false)
                                Vue.set(itemNote, 'checked', false)
                                Vue.set(itemNote, 'disabled', false)
                                itemNote.noteStripList.some((itemStrip, indexStrip) => {
                                    Vue.set(itemStrip, 'checked', false)
                                    Vue.set(itemStrip, 'disabled', false)
                                })
                            })
                        })
                    })
                }
            },
            // 选取游戏条数
            handleCheckedLevelChange(item) {
                let self = this;
                console.log(item, 'handleCheckedLevelChange', self.gameLevelType)
                Vue.set(item, 'checked', !item.checked)
                // 储存 选中的关卡id
                console.log(self.checkedLevel, item, '储存 选中的关卡 checkedLevel')
                if (item.checked) {
                    // 游戏关卡类型  0 -- 预备章  1 -- 主线  2 -- 左手  3 -- 乐理  4 -- 右手  5 -- 预备库
                    if (self.gameLevelType === 0 || self.gameLevelType === 1 || self.gameLevelType === 3 || self.gameLevelType === 5) {
                        self.checkedLevel.push({
                            id: item.stripId,
                            title: item.title,
                            stripType: item.stripType,
                            type: self.gameLevelType
                        })
                    }
                    if (self.gameLevelType === 2 || self.gameLevelType === 4) {
                        self.checkedLevel.push({
                            id: item.noteId,
                            title: item.noteTitle,
                            stripType: '',
                            type: self.gameLevelType
                        })
                    }
                } else {
                    if (JSON.stringify(self.checkedLevel) !== '[]') {
                        self.checkedLevel.some((itemLevel, indexLevel) => {
                            if (self.gameLevelType === 0 || self.gameLevelType === 1 || self.gameLevelType === 3 || self.gameLevelType === 5) {
                                if(itemLevel.id === item.stripId ) {
                                    self.checkedLevel.splice(indexLevel, 1);
                                }
                            }
                            if (self.gameLevelType === 3 || self.gameLevelType === 4) {
                                if(itemLevel.id === item.noteId ) {
                                    self.checkedLevel.splice(indexLevel, 1);
                                }
                            }
                        })
                    }
                }
                console.log(self.checkedLevel, '选取游戏条数')
                // // 存储欲编辑课程内容模块
                // self.courseContentModules.cache = self.checkedLevel
                // // 储存 选中的关卡id
                // const levelId = []
                // // 储存 选中的关卡
                // self.checkedLevel.some((itemLevel, indexLevel) => {
                //     levelId.push(itemLevel.stripId)
                // })
                // self.courseContentModules.content = levelId.join()
                // console.log(self.courseContentModules, '存储欲编辑课程内容模块')
            },
        }
    }
</script>

<style scoped>
    .knowledgeExtension .moduleLine{
        width: 60%;
        margin-right: 5px;
        margin-left: 25%;
        margin-top: 15px;
    }
    .knowledgeExtension .moduleLine .chapterList{
        margin-top: 20px;
        margin-left: 15px;
    }
    .knowledgeExtension .moduleLine .chapterList .chapterTitle{
        cursor: pointer;
        padding: 3px 8px;
        border-radius: 2px;
        margin-left: 8px;
    }
    .knowledgeExtension .moduleLine .chapterList .chapterTitle:hover{
        background: #606266;
        color: #ffffff;
    }
    .knowledgeExtension .moduleLine .chapterList .noteList{
        margin-top: 20px;
        margin-left: 15px;
    }
    .knowledgeExtension .moduleLine .chapterList .noteList .noteTitle{
        cursor: pointer;
        padding: 3px 8px;
        border-radius: 2px;
        margin-left: 8px;
    }
    .knowledgeExtension .moduleLine .chapterList .noteList .noteTitle:hover{
        background: #606266;
        color: #ffffff;
    }
    .knowledgeExtension .moduleLine .chapterList .noteList .noteTitle .stripList{
        margin-top: 20px;
        margin-left: 15px;   
    }  
</style>